﻿<phone:PhoneApplicationPage 
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
	x:Class="NASA.BeAMartian.Views.AnimationList"
	SupportedOrientations="Portrait" Orientation="Portrait"
	xmlns:commonControls="clr-namespace:NASA.BeAMartian.Controls"
	shell:SystemTray.IsVisible="False">
	<phone:PhoneApplicationPage.Resources>

        <Style x:Key="VideoPlayButtonStyle" TargetType="commonControls:ImageButton">
            <Setter Property="Width" Value="60"/>
            <Setter Property="Height" Value="69"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="commonControls:ImageButton">
                        <Grid x:Name="RootElement">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ImageMouseOver" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="RootElement" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.2"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="0.75"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Image x:Name="ImageNormal" Source="/NASA.BeAMartian;Component/Assets/Images/image-Play-enabled.png" Stretch="None"/>
                            <Image x:Name="ImageMouseOver" Source="/NASA.BeAMartian;Component/Assets/Images/image-Play-rollover.png" Stretch="None" Visibility="Collapsed"/>
                            <Rectangle x:Name="FocusVisualElement" Stroke="{StaticResource ForegroundColorFiveBrush}" StrokeThickness="1" Opacity="0.0" Margin="17,23,17,23" RadiusX="2" RadiusY="2"/>

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="Image" x:Key="stImage">
			<Setter Property="Height" Value="180"></Setter>
		</Style>
		<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
				<toolkit:WrapPanel/>
		</ItemsPanelTemplate>
		<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderThickness" Value="0,0,8,8"/>
			<Setter Property="BorderBrush" Value="Transparent"/>
			<Setter Property="Padding" Value="0"/>
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Top"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ListBoxItem">
						<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="SelectionStates">
									<VisualState x:Name="Unselected"/>
									<VisualState x:Name="Selected">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Border>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Style x:Key="ListBoxItemStyleAnimation" TargetType="ListBoxItem">
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderThickness" Value="0,0,0,20"/>
			<Setter Property="BorderBrush" Value="Transparent"/>
			<Setter Property="Padding" Value="0"/>
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Top"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ListBoxItem">
						<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="SelectionStates">
									<VisualState x:Name="Unselected"/>
									<VisualState x:Name="Selected">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Border>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
        </Style>
        <Storyboard x:Name="sbFadeInMER">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lbMER">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="sbFadeInMSL">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lbMSL">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>

	<!--LayoutRoot is the root grid where all page content is placed-->
	<Grid x:Name="LayoutRoot">
		<!--Pivot Control-->
		<Image Margin="0,-32,0,0" Source="/NASA.BeAMartian;component/Assets/Images/blk.png" Stretch="Fill"/>
		<!--Pivot Control-->
		<controls:Pivot Title="SELECT AN ANIMATION" x:Name="pvt" SelectionChanged="pvt_SelectionChanged">
            <controls:PivotItem Header="mars exploration rovers" Tag="MER">
                <Grid>
                    <ProgressBar x:Name="pbMER" IsIndeterminate="True" Height="17" Margin="-16,169,-15,0" VerticalAlignment="Top" Background="#FF4BFF3C" Foreground="#FF4BFF3C"/>
                    <ListBox Opacity="0" x:Name="lbMER" ItemContainerStyle="{StaticResource ListBoxItemStyleAnimation}" >
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                            	<StackPanel>
                            		<Image Tag="MER" ImageOpened="Image_ImageOpened" VerticalAlignment="Top" Source="{Binding Thumbnail}"/>
                            		<commonControls:ImageButton x:Name="VideoImageButton01" Opacity="0.82" Visibility="Visible" RenderTransformOrigin="0.5,0.5" 
                            			Style="{StaticResource VideoPlayButtonStyle}" Click="ImageButton_Click" 
                            			Tag="{Binding AnimationURL}" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,-133,0,0">
                            			<commonControls:ImageButton.RenderTransform>
                            				<TransformGroup>
                            					<ScaleTransform/>
                            					<SkewTransform/>
                            					<RotateTransform/>
                            					<TranslateTransform/>
                            				</TransformGroup>
                            			</commonControls:ImageButton.RenderTransform>
                            		</commonControls:ImageButton>
                            		<StackPanel Margin="0,8,0,0">
                            			<TextBlock Style="{StaticResource PhoneTextTitle3Style}" TextWrapping="NoWrap" Foreground="#FF4BFF3C"
                            				Text="{Binding Title}" VerticalAlignment="Bottom" HorizontalAlignment="Left" MaxWidth="480"/>
                            			<TextBlock Style="{StaticResource PhoneTextSmallStyle}" TextWrapping="Wrap" 
                            				Text="{Binding Description}" 
                            				VerticalAlignment="Top" HorizontalAlignment="Left"
                            				MaxWidth="480"/>
                            		</StackPanel>
                            	</StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
            </controls:PivotItem>

 			<!--Pivot item two-->
            <controls:PivotItem Header="mars curiosity rover" Tag="MSL">
                <Grid>
                    <ProgressBar x:Name="pbMSL" IsIndeterminate="True" Height="17" Margin="-16,169,-15,0" VerticalAlignment="Top" Background="#FF4BFF3C" Foreground="#FF4BFF3C"/>

                    <ListBox Opacity="0" x:Name="lbMSL" ItemContainerStyle="{StaticResource ListBoxItemStyleAnimation}" >
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel>
                                    <Image Tag="MSL" ImageOpened="Image_ImageOpened" VerticalAlignment="Top" Source="{Binding Thumbnail}"/>
                                    <commonControls:ImageButton x:Name="VideoImageButton01" Opacity="0.82" Visibility="Visible" RenderTransformOrigin="0.5,0.5" 
                                        Style="{StaticResource VideoPlayButtonStyle}" Click="ImageButton_Click" 
                                        Tag="{Binding AnimationURL}" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,-133,0,0">
                                        <commonControls:ImageButton.RenderTransform>
                                            <TransformGroup>
                                                <ScaleTransform/>
                                                <SkewTransform/>
                                                <RotateTransform/>
                                                <TranslateTransform/>
                                            </TransformGroup>
                                        </commonControls:ImageButton.RenderTransform>
                                    </commonControls:ImageButton>
                                    <StackPanel Margin="0,8,0,0">
                                        <TextBlock Style="{StaticResource PhoneTextTitle3Style}" TextWrapping="Wrap" 
                                        Text="{Binding Title}" Foreground="#FF4BFF3C" VerticalAlignment="Bottom" HorizontalAlignment="Left" MaxWidth="480"/>
                                        <TextBlock Style="{StaticResource PhoneTextSmallStyle}" TextWrapping="Wrap" 
            					            Text="{Binding Description}" 
            					            VerticalAlignment="Top" HorizontalAlignment="Left"
            					            MaxWidth="480"/>
                                    </StackPanel>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
            </controls:PivotItem>
		</controls:Pivot>
	</Grid>
</phone:PhoneApplicationPage>